<template>
  <el-carousel :interval="4000" type="card" height="400px" >
    <el-carousel-item v-for="(item, index) in imageList" :key="index">
      <img :src="item" alt="轮播图片" style=" width: 100%; height: 100%; object-fit: cover;">
    </el-carousel-item>
  </el-carousel>
<br>
 <div style="text-align: center;">
  <span class="system-notice">系统公告</span>
 </div>

  <el-table :data="NewsInfo.TableData" style="width:100%"  show-overflow-tooltip>
        <el-table-column label="公告标题" prop="title" align="center"/>
        <el-table-column label="公告内容" prop="content" align="center"/>
        <el-table-column label="发布时间" prop="createtime" align="center"/>
        <el-table-column label="发布人" prop="opername" align="center"/>

        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button size="small" @click="look(scope.$index, scope.row)">查看公告详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 5px;">
        <el-pagination background layout="prev, pager, next" 
        :total="NewsInfo.page.total" 
        :page-size="NewsInfo.page.pageSize"
        :current-page="NewsInfo.page.pageNum"
        @current-change="queryNewsData"
        />
      </div>

  <el-dialog v-model="NewsInfo.dialogVisible" width="500" center  :show-close="false">
    <template #title>
        <h2 class="title" style="text-align: center;">{{ NewsInfo.newsrow.title }}</h2>
    </template>
    <p class="content" style=" text-indent: 2em;">{{NewsInfo.newsrow.content}}</p>
    <div class="info">
        <div style="text-align: right;">
            <p class="createtime">发布时间:{{ NewsInfo.newsrow.createtime }}</p>
            <p class="opername">操作人：{{ NewsInfo.newsrow.opername }}</p>
        </div>
    </div>
        
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="NewsInfo.dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'


const NewsInfo = reactive({
    TableData:[],
     page:{
            pageNum:0,
            pageSize:5,
            total:0
        },
    dialogVisible:false,
    newsrow:{
        title:'',
        content:'',
        createtime:'',
        opername:''
    },
    newscontent:'',
})



const look=(index,row)=>{
    NewsInfo.newsrow=row;
    NewsInfo.dialogVisible=true;    
}

const queryNewsData = (currentpage:number) => {
  NewsInfo.page.pageNum = currentpage;
  axios.get("http://192.140.166.207:8888/SysNewsController/findAllNews", { params: NewsInfo.page })
    .then(res => {
      if (res.data.success) {
        NewsInfo.newscontent=res.data.data.list.content;
        NewsInfo.TableData = res.data.data.list;
        NewsInfo.page.total = res.data.data.total;
      }
    })
    .catch(error => {
      ElMessage.error("请求失败!");
    });
};

// 定义包含图片路径的数组
const imageList = ref([
  require('@/assets/car1.png'), // 请根据实际图片路径修改
  require('@/assets/car2.png'),
  require('@/assets/car3.png'),
  require('@/assets/car4.png'),
  require('@/assets/car5.png'),
  require('@/assets/car6.png')
]);

onMounted(() => {
  queryNewsData(1);
});
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.news-detail {
    width: 600px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.info {
  font-size: 14px;
  color: #666;
}

.system-notice {
      font-family: '微软雅黑', sans-serif;
      font-size: 36px;
      /* color: #333; */
      font-weight: bold;
      /* text-decoration: underline; */
      /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
      text-align: center;
      /* background-color: #f5f5f5; */
      padding: 20px;
      border-radius: 10px;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);s */

      
      margin: auto;
    }
</style>




